<template>
    <div>
        <div class="xw-block" style="position: relative">
            <h3>{{ detail.title }}</h3>
            <div>
                <p style="color: #8a919f;font-size: 13px;">
                    <i class="el-icon-s-custom"></i>
                    <span style="margin-left: 5px">{{detail.sendUserName}}</span>
                    <span style="margin-left: 10px">{{detail.sendTime | dateFormatHms}}</span>
                    <el-tag style="margin-left: 10px" type="mini">{{detail.type}}</el-tag>
                </p>
            </div>
            <CommentOp
                style="position: absolute;right: 30px;top: 10px"
                @brush="brush"
                :opData="{linkId: 0,title: detail.title,postCodeId: detail.id}"
                :state="0"
                :isColl="true"
                :is-show-num="true"
            ></CommentOp>
        </div>

        <div class="xw-block">
            <h4><i class="el-icon-monitor"></i><span style="margin-left: 10px">帖子内容</span></h4>
            <Tinymce v-model="detail.content" displayMode></Tinymce>
            <div v-if="detail.menuImages && detail.menuImages.length > 0">
                <el-image
                    v-for="item in detail.menuImages"
                    :key="item"
                    style="width: 100px;height: 100px;margin-right: 10px;border-radius: 5px"
                    :src="item"
                    :preview-src-list="[item]"
                    fit="cover">
                </el-image>
            </div>
        </div>

        <div class="xw-block" :key="brushKey">
            <h4><i class="el-icon-monitor"></i><span style="margin-left: 10px">评论详情</span></h4>
            <CommentList v-if="detail.id" ref="CommentList" :postCodeId="detail.id"></CommentList>
        </div>
    </div>
</template>
<script>
import CommentList from "@/components/CommentList.vue";
import CommentOp from "@/components/CommentOp.vue";
import Tinymce from "@/components/Tinymce.vue";
export default {
    data() {
        return {
            brushKey: 0,
            // 评论发送信息
            selectCommentRow: {},
            commentVisible: false,
            detail: '',
            id: '',
            commentData: [],

        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.load()
    },
    components: {Tinymce,CommentList,CommentOp },
    methods: {
        // 子组件触发刷新列表
        brush() {
            this.brushKey++
            this.load()
        },
        load() {
            this.request.get("/postCode/" + this.id).then(res => {
                if (res.code === '200') {
                    this.detail = res.data
                }
            })
        },

    }
}
</script>